<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css" />
    <style>
        html,
        body {
            background-color: #fff;
        }

        .nav {
            color: #333;
            font-size: 18px;
            text-align: center;
            padding: 12px 10px;
        }

        .left-icon {
            width: 22px;
            float: left;
        }


        .list {
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .list .list-half {
            width: calc(50% - 4px);
            padding: 2px;
            box-sizing: border-box;
        }


        .list-half .item {
            overflow: hidden;
            margin-bottom: 30rpx;
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
            position: relative;
        }
        .item .img{
            width: 100%;
        }
        #no_more{
            text-align: center;
        }


        /* .item::after{
          position: absolute;
          height: 30px;
          line-height: 30px;
          width: 30px;
          text-align: center;
          background-color: #000;
          color: #fff;
          top: 10px;
          left: 10px;
          content: counter(itemCount);
        } */
        .coin {
            position: absolute;
            left: 0px;
            top: 0px;
            background: gold;
            padding: 4px;
            color: #ffffff;
            border-radius: 0 0 16px 0;
        }

        .info {
            width: calc(100% - 20px);
            padding: 5px 10px;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .msg {
            color: #FCFBFB;
            font-size: 13px;
        }

        .las {
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .lal {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .lal span {
            color: #FAF9F9;
            font-size: 10px;
            margin-left: 5px;
        }

        .tou {
            width: 25px;
            height: 25px;
            border-radius: 100px;

        }

        .btn {
            width: 55%;
            display: block;
            margin: 0 auto;
            font-size: 14px;
            color: #525252;
            border-radius: 100px;
            padding: 10px 0;
            background: #f2f3f3;
        }
    </style>
</head>

<body>
<div id="view" v-cloak>
    <button class="btn" onclick="_url({url:'zhibo/fabu',title:'+发布视频'})">
        +发布视频
    </button>

    <div class="list">
        <div class="list-half">
            <div class="item" v-for="(m,index) in ffList" :key="m.id" v-if="index%2 == 0" @click="showAction(m)">
                <img :src="returnImg(m.cover_url)" class="img">
                <div class="info">
                    <p class="msg">{{m.desc.length > 11 ? m.desc.slice(0, 11) + '...' : m.desc }}</p>
                    <div class="las">
                        <div class="lal">

                        </div>
                        <div class="lal">
                            <img src="../../image/zhibo/bofang.png" class="bofang"/>
                            <span>{{m.play_times}}</span>
                        </div>
                    </div>
                </div>
                <div class="coin" v-if="m.is_free == 2">{{m.fee}}金币</div>
            </div>
        </div>
        <div class="list-half">
                <div class="item" v-for="(m,index) in ffList" :key="m.id" v-if="index%2 != 0" @click="showAction(m)">
                    <img :src="returnImg(m.cover_url)" class="img">
                    <div class="info">
                        <p class="msg">{{m.desc.length > 11 ? m.desc.slice(0, 11) + '...' : m.desc }}</p>
                        <div class="las">
                            <div class="lal">

                            </div>
                            <div class="lal">
                                <img src="../../image/zhibo/bofang.png" class="bofang"/>
                                <span>{{m.play_times}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="coin" v-if="m.is_free == 2">{{m.fee}}金币</div>
                </div>

            </div>
    </div>
    <div id="no_more"></div>


</div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/ffkj.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
    <script type="text/javascript" src="../../script/update.js"></script>
    <script type="text/javascript">
        var view = new Vue({
            el: '#view',
            data: {
                ffList: []
            },
            methods: {
                _url(param, url) {
                    _url(param, url);
                },
                // 返回图片路径
                returnImg(url) {
                    return returnImg(url);
                },
                showAction(m){
                    var buttons = [ '查看', '编辑', '删除'];
                    _action('', buttons, function(bIndex) {
                        if(bIndex == 1){
                            _url({ video: m.video_url, cover: m.cover_url, animationType: 0 }, 'frame0/liaotian_video')
                        }else if (bIndex == 2){
                            _url({url:'zhibo/fabu',title:'+发布视频', info: m})
                        }else if (bIndex == 3){
                            var obj = {
                                msg: '确定要删除该视频吗？',
                            }
                            _confirm(obj, function(bIndex) {
                                if (bIndex == 1) {
                                    _ajax('api/video/delVideo', function(ret, err) {
                                        _msg(ret.msg);
                                        if (ret && ret.code == 200) {
                                            getData(0);
                                        }
                                    }, {
                                        user_id: $api.getStorage('userid'),
                                        id: m.id
                                    })
                                }
                            })
                        }
                    })
                }
            }
        })
        apiready = function () {
            view.my = api.pageParam['my'] || 0;
            _shangla(function () {
                getData(0);
            })

            _scrollToBottom(function () {
                if (heigutgao == 1) {
                    pagenum++;
                    getData(pagenum)
                }
            })
            _listener('upmevideo', ()=>{
                getData(0);
            })
        }

        // 获取数据
        function getData(page) {
            var param = {
                user_id: $api.getStorage('userid')
            }
            console.log(JSON.stringify(param));
            var loading = page == 0 ? 1 : 0;
            _lists('api/video/myVideo', page, loading, param)
        }
    </script>
</body>

</html>